<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
             #{ managerCriarEscritura.escritura.id == null ? 'Cadastrar Escrituras e Procurações' : 'Editar Escrituras e Procurações' } 
        </ui:define>  

        <ui:define name="content">
            <h:form id="criarEscrituraForm">
                <p:messages id="criarEscrituraMessages" autoUpdate="true" />

                <div class="actions">
                    <div id="buttons">
                        <p:button value="Pesquisar" outcome="pesquisarEscritura.xhtml"
                                  rendered="#{ managerCriarEscritura.escritura.id == null }"
                                  icon="ui-icon-search" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>

                <p:fieldset legend="Dados" id="dadosFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Ato" for="atoTipoEPAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="atoTipoEPAutoComplete" value="#{ managerCriarEscritura.escritura.atoTipoEP }"
                                            forceSelection="true" dropdown="true" var="atoTipoEP" itemValue="#{ atoTipoEP }" 
                                            itemLabel="#{ atoTipoEP.descricao }" completeMethod="#{ managerCriarEscritura.autocompletarAtoTipoEP }"
                                            converter="conversoratotipoep" minQueryLength="3" required="true" requiredMessage="Tipo do Ato é obrigatório">
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@form" listener="#{ managerCriarEscritura.limparNatureza() }" />
                            </p:autoComplete>
                        </div>                        

                        <div class="column2">
                            <p:outputLabel value="Natureza" for="naturezaEscrituraAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete
                                id="naturezaEscrituraAutoComplete" value="#{ managerCriarEscritura.escritura.naturezaEscritura }"
                                disabled="#{ managerCriarEscritura.escritura.atoTipoEP.tipoAtoCEP != 'ESCRITURA' }"
                                forceSelection="true" dropdown="true" var="naturezaEscritura" itemValue="#{ naturezaEscritura }" 
                                itemLabel="#{ naturezaEscritura.descricao }" completeMethod="#{ managerCriarEscritura.autocompletarNaturezaEscritura }"
                                converter="conversornaturezaescritura" minQueryLength="3" required="true" requiredMessage="Natureza é obrigatório">
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@form"/>
                            </p:autoComplete>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" value="#{ managerCriarEscritura.escritura.numero }"
                                         required="true" requiredMessage="Número é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="cidadeAutoComplete" value="#{ managerCriarEscritura.escritura.cidade }"
                                            forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                            itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarEscritura.autocompletarCidade }"
                                            converter="conversorcidade" minQueryLength="3" /> 
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Data do Ato" for="dataAtoCalendar" />
                        </div>
                        <div class="column3">
                            <p:calendar id="dataAtoCalendar" value="#{ managerCriarEscritura.escritura.dataAto }"
                                        showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" required="true"
                                        requiredMessage="Data do Ato é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Valor" for="valorInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="valorInputText" value="#{ managerCriarEscritura.escritura.valor }"
                                         required="true" requiredMessage="Valor é obrigatório"
                                         onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Livro" for="livroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="livroInputText" value="#{ managerCriarEscritura.escritura.livro }"
                                         required="true" requiredMessage="Livro é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Complemento do Livro" for="livroComplementoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="livroComplementoInputText" value="#{ managerCriarEscritura.escritura.livroComplemento }" />
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Folha" for="folhaInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhaInputText" value="#{ managerCriarEscritura.escritura.folha }"
                                         required="true" requiredMessage="Folha é obrigatório" />
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Complemento do Folha" for="folhaComplementoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhaComplementoInputText" value="#{ managerCriarEscritura.escritura.folhaComplemento }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Objeto" for="objetoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="objetoInputTextarea" value="#{ managerCriarEscritura.escritura.objeto }" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Dados de Referência" id="dadosReferenteFieldset"
                            rendered="#{ (managerCriarEscritura.escritura.atoTipoEP.tipoAtoCEP == 'REFERENCIA') or (managerCriarEscritura.escritura.atoTipoEP.tipoAtoCEP == 'ESCRITURA' and managerCriarEscritura.escritura.naturezaEscritura.reratificacao) }">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Desconhecido?" for="atoDesconhecidoSelectBooleanButton" />                        
                        </div>
                        <div class="column1">
                            <p:selectBooleanButton id="atoDesconhecidoSelectBooleanButton" value="#{ managerCriarEscritura.escritura.atoDesconhecido }" onLabel="Sim" offLabel="Não">
                                <p:ajax event="change" oncomplete="widthFix();" update=":criarEscrituraForm:desconhecidoInputTextarea, :criarEscrituraForm:revogacaoPanel"/>
                            </p:selectBooleanButton>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Desconhecido" for="desconhecidoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="desconhecidoInputTextarea" value="#{ managerCriarEscritura.escritura.desconhecido }"
                                             disabled="#{ not managerCriarEscritura.escritura.atoDesconhecido }"
                                             required="true" requiredMessage="Desconhecido é obrigatório" />
                        </div>
                    </div>

                    <p:panel id="revogacaoPanel" styleClass="noborder">

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Livro" for="livroReferenteInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="livroReferenteInputText" required="true" requiredMessage="Livro é obrigatório" value="#{ managerCriarEscritura.escritura.livroReferente }"
                                             disabled="#{ managerCriarEscritura.escritura.atoDesconhecido }"/>
                            </div>
                            <div class="column2">
                                <p:outputLabel value="Complemento do Livro" for="livroReferenteComplementoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="livroReferenteComplementoInputText" value="#{ managerCriarEscritura.escritura.livroReferenteComplemento }" 
                                             disabled="#{ managerCriarEscritura.escritura.atoDesconhecido }"/>
                            </div>                        
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Folha" for="folhaReferenteInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="folhaReferenteInputText" required="true" requiredMessage="Folha é obrigatório" value="#{ managerCriarEscritura.escritura.folhaReferente }"
                                             disabled="#{ managerCriarEscritura.escritura.atoDesconhecido }"/>
                            </div>
                            <div class="column2">
                                <p:outputLabel value="Complemento do Folha" for="folhaReferenteComplementoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="folhaReferenteComplementoInputText" value="#{ managerCriarEscritura.escritura.folhaReferenteComplemento }"
                                             disabled="#{ managerCriarEscritura.escritura.atoDesconhecido }"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Cidade" for="cidadeReferenteAutoComplete" />
                            </div>
                            <div class="column3">
                                <p:autoComplete id="cidadeReferenteAutoComplete" value="#{ managerCriarEscritura.escritura.cidadeReferente }"
                                                forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                                itemLabel="#{ cidade.nome }" completeMethod="#{ managerCriarEscritura.autocompletarCidade }"
                                                converter="conversorcidade" minQueryLength="3" required="true" requiredMessage="Cidade é obrigatório"
                                                disabled="#{ managerCriarEscritura.escritura.atoDesconhecido }"/>
                            </div>
                            <div class="column2">
                                <p:outputLabel value="Cartório" for="cartorioReferenteInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="cartorioReferenteInputText" value="#{ managerCriarEscritura.escritura.cartorioReferente }"
                                             required="true" requiredMessage="Cartório é obrigatório"
                                             disabled="#{ managerCriarEscritura.escritura.atoDesconhecido }"/>
                            </div>
                        </div>

                    </p:panel>

                </p:fieldset>

                <p:fieldset legend="Partes" id="partesFieldset">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Pessoa" for="tipoPessoaSelectOneMenu" />
                        </div>                        
                        <div class="column10">
                            <p:selectOneRadio id="tipoPessoaSelectOneMenu" value="#{ managerCriarEscritura.parte.pessoa.tipoPessoa }">
                                <f:selectItems value="#{ enums.tiposPessoa() }" />
                                <p:ajax event="change" update="partesFieldset" oncomplete="widthFix();" />
                            </p:selectOneRadio>
                        </div>
                    </div>

                    <p:panel styleClass="column12 noborder" rendered="#{ managerCriarEscritura.parte.pessoa.tipoPessoa eq 'FISICA' }">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome" for="nomeInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="nomeInputText" value="#{ managerCriarEscritura.parte.pessoa.nome }"
                                             required="true" requiredMessage="Nome é obrigatório" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CPF" for="cpfInputMask" />
                            </div>
                            <div class="column3">
                                <p:inputMask id="cpfInputMask" value="#{ managerCriarEscritura.parte.pessoa.cpf  }"
                                             mask="999.999.999-99" required="true" requiredMessage="CPF é obrigatório" />
                            </div>
                            <div class="column2">
                                <p:outputLabel value="RG" for="rgInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="rgInputText" value="#{ managerCriarEscritura.parte.pessoa.rg  }" />
                            </div>
                        </div>



                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Data de Nascimento" for="dataNascimentoCalendar" />
                            </div>
                            <div class="column3">
                                <p:calendar id="dataNascimentoCalendar" value="#{ managerCriarEscritura.parte.pessoa.dataNascimento }"
                                            showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" />
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Orgão emissor" for="orgaoEmissorInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="orgaoEmissorInputText" value="#{ managerCriarEscritura.parte.pessoa.orgaoEmissor  }" />
                            </div>
                        </div>

                        <div class="row">


                            <div class="column2">
                                <p:outputLabel value="Qualidade" for="qualidadeFisicaAutoComplete" />
                            </div>
                            <div class="column8">
                                <p:autoComplete id="qualidadeFisicaAutoComplete" value="#{ managerCriarEscritura.parte.qualidade }"
                                                disabled="#{ managerCriarEscritura.escritura.atoTipoEP == null ? true : false }"
                                                forceSelection="true" dropdown="true" var="qualidade" itemValue="#{ qualidade }" 
                                                itemLabel="#{ qualidade.descricao }" completeMethod="#{ managerCriarEscritura.autocompletarQualidade }"
                                                converter="conversorqualidade" minQueryLength="3"
                                                required="true" requiredMessage="Qualidade é obrigatório" />
                            </div>                            
                        </div>

                    </p:panel>

                    <p:panel styleClass="column12 noborder" rendered="#{ managerCriarEscritura.parte.pessoa.tipoPessoa eq 'JURIDICA' }">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CNPJ" for="cnpjInputMask" />
                            </div>
                            <div class="column3">
                                <p:inputMask id="cnpjInputMask" value="#{ managerCriarEscritura.parte.pessoa.cnpj  }"
                                             mask="99.999.999/9999-99" required="true" requiredMessage="Razão Social é obrigatório" />
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Qualidade" for="qualidadeJuridicaAutoComplete" />
                            </div>
                            <div class="column3">
                                <p:autoComplete id="qualidadeJuridicaAutoComplete" value="#{ managerCriarEscritura.parte.qualidade }"
                                                disabled="#{ managerCriarEscritura.escritura.atoTipoEP == null ? true : false }"
                                                forceSelection="true" dropdown="true" var="qualidade" itemValue="#{ qualidade }" 
                                                itemLabel="#{ qualidade.descricao }" completeMethod="#{ managerCriarEscritura.autocompletarQualidade }"
                                                converter="conversorqualidade" minQueryLength="3"
                                                required="true" requiredMessage="Qualidade é obrigatório" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Razão Social" for="razaoSocialInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="razaoSocialInputText" value="#{ managerCriarEscritura.parte.pessoa.razaoSocial }"
                                             required="true" requiredMessage="Razão Social é obrigatório" />
                            </div>
                        </div>
                    </p:panel>

                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarEscritura.adicionarParte() }" update="criarEscrituraForm:partesFieldset"
                                         icon="ui-icon-plus" styleClass="ui-priority-primary" process="criarEscrituraForm:partesFieldset" oncomplete="widthFix();" />
                        <p:commandButton value="Limpar" update="criarEscrituraForm:partesFieldset" process="@this, criarEscrituraForm:partesFieldset" icon="ui-icon-close"
                                         actionListener="#{ managerCriarEscritura.limparParte() }" oncomplete="widthFix();" />
                    </div>

                    <p:dataTable id="partesDataTable" value="#{ managerCriarEscritura.partes }" var="parte"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhuma parte adicionada">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarEscritura.editarParte(parte) }"
                                                 process="@this" update=":criarEscrituraForm:partesFieldset" oncomplete="widthFix();" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarEscritura.removerParte(parte) }"
                                                 process="@this" update="partesDataTable" />
                            </div>
                        </p:column>
                        <p:column headerText="Nome/Razão Social" width="50%">
                            <h:outputText value="#{ parte.pessoa.tipoPessoa eq 'FISICA' ?  parte.pessoa.nome : parte.pessoa.razaoSocial }" />
                        </p:column>
                        <p:column headerText="CPF/CNPJ" width="20%">
                            <h:outputText value="#{ parte.pessoa.tipoPessoa eq 'FISICA' ? managerCriarEscritura.adicionarMascaraCPF(parte.pessoa.cpf) : managerCriarEscritura.adicionarMascaraCNPJ(parte.pessoa.cnpj) }" />
                        </p:column>
                        <p:column headerText="Qualidade" width="25%">
                            <h:outputText value="#{ parte.qualidade.descricao }" />
                        </p:column>
                    </p:dataTable>

                </p:fieldset>

                <p:fieldset legend="Selos" id="selosEPFieldset">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroSeloInputText" value="#{ managerCriarEscritura.seloEP.numero }"
                                         required="true" requiredMessage="Número é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Série" for="serieSeloInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="serieSeloInputText" value="#{ managerCriarEscritura.seloEP.serie }"
                                         required="true" requiredMessage="Série é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Selo" for="tipoSeloAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerCriarEscritura.seloEP.tipoSelo }"
                                            forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                            itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerCriarEscritura.autocompletarTipoSelo }"
                                            converter="conversortiposelo" minQueryLength="3"
                                            required="true" requiredMessage="Tipo do Selo é obrigatório">
                                <p:column>
                                    <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                </p:column>
                                <p:column>#{ tipoSelo.nome }</p:column>
                            </p:autoComplete>
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarEscritura.adicionarSeloEP() }" update="criarEscrituraForm:selosEPFieldset"
                                         icon="ui-icon-plus" styleClass="ui-priority-primary" process="criarEscrituraForm:selosEPFieldset" oncomplete="widthFix();" />
                        <p:commandButton value="Limpar" update="criarEscrituraForm:selosEPFieldset" process="@this, criarEscrituraForm:selosEPFieldset" icon="ui-icon-close"
                                         actionListener="#{ managerCriarEscritura.limparSeloEP() }" oncomplete="widthFix();" />
                    </div>

                    <p:dataTable id="selosEPDataTable" value="#{ managerCriarEscritura.selosEP }" var="seloEP"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhuma selo adicionado">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarEscritura.editarSeloEP(seloEP) }"
                                                 process="@this" update=":criarEscrituraForm:selosEPFieldset" oncomplete="widthFix();" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarEscritura.removerSeloEP(seloEP) }"
                                                 process="@this" update="selosEPDataTable" />
                            </div>
                        </p:column>
                        <p:column headerText="Número" width="30%">
                            <h:outputText value="#{ seloEP.numero }" />
                        </p:column>
                        <p:column headerText="Série" width="30%">
                            <h:outputText value="#{ seloEP.serie }" />
                        </p:column>
                        <p:column headerText="Tipo" width="35%">
                            <h:outputText value="#{ seloEP.tipoSelo.nome }" />
                        </p:column>
                    </p:dataTable>

                </p:fieldset>

                <p:fieldset legend="Anexos" id="anexosFieldset">

                    <p:fileUpload
                        auto="true"
                        mode="advanced"
                        label="Anexar"
                        uploadLabel="Enviar"
                        cancelLabel="Cancelar"
                        fileUploadListener="#{  managerCriarEscritura.adicionarAnexo  }"
                        multiple="true"
                        allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|xls|xlsx|pdf|)$/"
                        dragDropSupport="true"
                        invalidFileMessage="Tipo de arquivo não suportado."
                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                        process="@this"
                        update="@this, :criarEscrituraForm:anexosFieldset" />

                    <ui:repeat value="#{  managerCriarEscritura.anexos  }" var="anexo">
                        <p:panel styleClass="thumbnail">
                            <p:commandButton id="removeButton" alt="Remover" 
                                             process="@this" styleClass="ui-button-only ui-priority-primary button-remove"
                                             icon="ui-icon-trash" update=":criarEscrituraForm:anexosFieldset"
                                             actionListener="#{ managerCriarEscritura.removerAnexo(anexo) }" />

                            <h:outputLink
                                value="#{  anexo.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show'  }" title="#{  anexo.nomeExibicao  }"  target="_blank">

                                <p:graphicImage rendered="#{  managerImagem.imagem(anexo)  }"
                                                url="#{  managerImagem.urlThumbnailImagem(anexo)  }" />
                                <p:outputLabel styleClass="nome_anexo" value="#{  managerImagem.nomeAnexo(anexo)  }"
                                               rendered="#{  managerImagem.imagem(anexo)  }"/>
                                <p:graphicImage height="100" width="100" rendered="#{  managerImagem.PDF(anexo)  }" 
                                                url="#{  managerImagem.urlPDF  }" />
                                <p:outputLabel value="#{  managerImagem.nomeAnexoPdf(anexo)  }" 
                                               rendered="#{  managerImagem.PDF(anexo)  }"/>
                                <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(anexo) }"/>

                            </h:outputLink>

                        </p:panel>
                    </ui:repeat>

                </p:fieldset>                

                <div class="command">
                    <p:commandButton actionListener="#{ managerCriarEscritura.salvar() }" value="Salvar"
                                     styleClass="ui-priority-primary" update="@form" oncomplete="widthFix();"
                                     process="@this, :criarEscrituraForm:dadosFieldset, :criarEscrituraForm:dadosReferenteFieldset, :criarEscrituraForm:partesDataTable, :criarEscrituraForm:selosEPDataTable, :criarEscrituraForm:anexosFieldset"
                                     icon="ui-icon-disk" onsuccess="goY(0);" />
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarEscritura.xhtml" />
                </div>

            </h:form>

        </ui:define>
    </ui:composition>

</html>                
